<template>
    <Row>
        <Col span="12">
             <ButtonGroup>
                <Button @click="changeType(1)" :class="{active:formValidate.type===1}">新闻分类</Button>
                <Button @click="changeType(2)" :class="{active:formValidate.type===2}">上传分类</Button>
                <Button @click="changeType(3)" :class="{active:formValidate.type===3}">产品分类</Button>
            </ButtonGroup>
            <Tree :data="baseData" show-checkbox @on-select-change="submitForm" @on-check-change="remove"></Tree>
        </Col>
        <Col span="12">
            <Row style="margin-top:40px;">
                <form action="">
                    <!-- <input type="" name="parentId" ref="parentId"/><br> -->
                    <label for="">分类名称</label>
                    <input type="text" v-model="formValidate.title" ref="inp">  
                    <!-- <button type="" @click="submitForm">提交</button>
                    <button type="" @click="clearForm">清空</button>  -->      
                </form>             
            </Row><br>
            <Row>
                <Button type="success" @click="submitForm">添加根节点</Button>
                <Button type="warning" @click="editNode">修改</Button>
                <Button type="error" @click="remove">删除</Button> 
            </Row>
            
                    
                              
        </Col>
    </Row>
    
</template>
<script>
    var nodeId=null;
    export default {
        data () {
            return {
                baseData: [],
                value:'',
                parentId:'',
                value:'',
                formValidate:{
                    title:'',
                    type:1,
                },
                childrenData: {
                    title:'',
                    children: [],
                    parentId: '',
                    id: ''
                }
            }
        },
        methods:{
           /*  selection(node) {
                 this.parentId = node[0]._id;
                 this.childrenData.parentId = node[0]._id; 
            }, */
            changeType(type){
                this.formValidate.type=type;
                this.getTree(type)
            },
            getTree(type){
                this.$http({
                    method:'POST',                    
                    url:'http://localhost:3000/cate/list/'+type,
                }).then(res=>{
                    // console.log(res.data);
                    this.baseData=res.data;
                })
            },
            //添加节点
            submitForm(node){
                if(this.$refs.inp.value!=''){
                    this.clearForm();
                    
                    var data=null;
                    if(Array.isArray(node)){
                        this.parentId = node[0]._id;
                        this.childrenData.parentId = node[0]._id;
                        data={
                            title:this.formValidate.title,
                            parentId:this.parentId,
                            type:this.formValidate.type
                        }
                    }else{
                        data=this.formValidate
                    }
                    this.$http({
                        method:'POST',
                        url:'http://localhost:3000/cate/data',
                        data:data
                    }).then(res=>{
                        console.log(res.data);
                        this.getTree(this.formValidate.type)
                    })  
                }else{
                    alert('单击直接添加子节点，请输入子节点内容')
                }
            },
            //修改节点
            editNode(){
                
            },
            //删除节点
            remove(node){
                this.parentId = node[0]._id;
                console.log(this.parentId)
                 this.$http({
                    method:"DELETE",
                    url:'http://localhost:3000/cate/data/'+this.parentId,
                })
                .then((response) => {
                    this.getTree(this.formValidate.type);
                    this.parentId = '';
                })

            },
            clearForm(){
                this.$refs.inp.value=''
            }
        },
        created(){
            this.getTree(1);
        }
    }
</script>

<style scoped>
    .active{
        background:lightskyblue;
    }
</style>
